Ext.define('Era.controller.EventsList',{
    extend: 'Ext.app.Controller',
    models: ['Event'],
    stores: ['Events'],
 
    refs: [
        {
            ref: 'eventsgrid',
            selector: 'eventsgrid'
        },
        {
            ref: 'viewport',
            selector: 'viewport'
        }
    ],
 
    init: function() {
        this.control({
            'eventslist': {
                render: this.setAutoHide,
                showpreview: this.onShowPreview,
                hidepreview: this.onHidePreview
            },
            'eventsgrid': {
                selectionchange: this.onShowForm
            }
        });
    },
    
    setAutoHide: function(component) {
        component.getEl().on('mouseleave',function() {
            component.hide();
        });
    },
    
    onShowPreview: function(view,record) {
        this.preview = Ext.create('Era.view.EventPreview',{record: record});
        this.preview.show();
    },
    
    onHidePreview: function() {
        this.preview.destroy();
    },
    
    onShowForm: function(sel,record) {
        
        //get the form from the viewport
        var form = this.getViewport().eventForm;
       
        //bind the event to the form
        form.down('form').getForm().loadRecord(record[0]);
        
        //show the form
        form.show();   
    }
    
});

